<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html >
<head>
 <meta http-equiv=Content-Type content="text/html; charset=utf-8">
 <script src=
       "${pageContext.request.contextPath}/js/jquery-1.11.3.min.js">
</script>
  <title>登录界面</title>
  
  
  <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans'>

      <link rel="stylesheet" href="../css/style.css">
      <style type="text/css">
<!--
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: none;
}
a:active {
 text-decoration: none;
}
-->

           
</style>

</head>

<body>
 <p class="tip">       </p>
<div class="cont" >
  <div class="form sign-in">
    <h2>欢迎登录</h2>
    <label>
      <span>账号</span>
      <input id="userid" type="text" name="userid" />
    </label>
    <label>
      <span>密码</span>
      <input id="password" type="password" name="password" />
    </label>
    <p class="forgot-pass">忘记密码？</p>
    <button type="button" class="submit" onclick="tologin()">登录</button>
    <a href="../index.jsp">
    <button type="button" class="fb-btn" >跳过，直接 <span>浏览</span></button>
    </a>
  </div>
  <div class="sub-cont">
    <div class="img">
      <div class="img__text m--up">
        <h2>没有账号？</h2>
        <p>注册新账号！！享受更多功能</p>
      </div>
      <div class="img__text m--in">
        <h2>已有账号？</h2>
        <p>已经注册过账号，可直接登陆。</p>
      </div>
      <div class="img__btn">
        <span class="m--up">注册</span>
        <span class="m--in">登录</span>
      </div>
    </div>
    <div class="form sign-up">
      <h2>注册账号，加入我们把！</h2>
      <label>
        <span>昵称</span>
        <input id="nickname" type="text" name="nickname" />
      </label>
      <label>
        <span>账号</span>
        <input id="userid0" type="text" name="userid0" />
      </label>
      <label>
        <span>密码</span>
        <input id="password0" type="password" name="password0" />
      </label>
       <label>
        <span>邮箱</span>
        <input id="email" type="email" name="email" />
      </label>     
      <button type="button" class="submit" onclick="validateNickname(),validateLoginname(),validateLoginpass(),validateEmail(),toreg()">注册</button>
      <a href="../index.jsp">
    <button type="button" class="fb-btn" >跳过，直接 <span>浏览</span></button>
    </a>
    </div>
  </div>
</div>

<a href="https://dribbble.com/shots/3306190-Login-Registration-form" target="_blank" class="icon-link">
  <img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/256/Dribbble-icon.png">
</a>
<a href="https://twitter.com/NikolayTalanov" target="_blank" class="icon-link icon-link--twitter">
  <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">
</a>
  
<script src="../js/index.js"></script>


<script type="text/javascript">


function tologin(){
	alert("ceshi");
	 
	var userid=$("#userid").val();
	var password=$("#password").val();
	var jo = {"userid":userid,"password":password,"status":"ord"};
	$.ajax({
		type : "post",
		url : "../login.action",
		dataType : "json",
		data : jo,
		success : function(data) {
			//<!--变成字节流>
			if(data.status=="succeed"){
				//alert("登陆成功");
				window.location.href="../index.jsp";
			}else if(data.status=="fail"){
				//alert("登录失败");
			}
		}
	});	 
}


function toreg(){
	var nickname=$("#nickname").val();
	var userid=$("#userid0").val();
	var password=$("#password0").val();
	var email=$("#email").val();


	var jo = {"nickname":nickname,"userid":userid,"password":password,"status":"ord","usercover":"","email":email,"gender":""};
	$.ajax({
		type : "post",
		url : "../register.action",
		dataType : "json",
		data : jo,
		success : function(data) {
			//<!--变成字节流>
			if(data.status=="succeed"){
				//alert("注册成功");
				window.location.href="contact.jsp";
			}else if(data.status=="fail"){
				//alert("注册失败");
			}
		}
	});	 
}




$(function(){  
   
    
     
    $(".inputClass").blur(function(){  
        var id=($(this).attr("id"));  
        var funName="validate"+id.substring(0,1).toUpperCase()+id.substring(1)+"()";  
        eval(funName);  
    });  
    $("#registForm").submit(function(){  
        var bool=true;  
        if(!validateNickname()){bool=false;}
        if(!validateLoginname()){bool=false;}  
        if(!validateLoginpass()){bool=false;}  
        if(!validateEmail()){bool=false;}  
         
        return bool;  
    })  
});  


function validateNickname(){  
    var id="nickname";  
    var value=$("#"+id).val();  
    if(!value){  
       alert("昵称不能为空"); 
        return false;  
    }  
    if(value.length>20){  
        alert("昵称长度必须小于20个字符");  
        return false;  
    }  
    return true;  
}  
//注册id校验  
function validateLoginname(){  
	var userid=$("#userid0").val();
	var jo={"userid":userid};
    if(!userid){  
        alert("用户名不能为空");
        return false;  
    }  
    if(userid.length<3||userid.length>10){  
       alert("用户名长度必须在3~10");  
        return false;  
    }  
    $.ajax({  
        url:"../validate.action",
        async:true,  
        cache:false, 
        type:"post",
        dataType:"json", 
        data:jo,
        success : function(data) {
			//<!--变成字节流>
			if(data.status=="succeed"){
				alert("用户名通过");
				window.location.href="../index.jsp";
			}else if(data.status=="failed"){
				alert("用户名已存在");
			}
		} 
    })  
    return true;  
}  
  
//登录密码校验  
function validateLoginpass(){  
    var id="password0";  
    var value=$("#"+id).val();  
    if(!value){  
       alert("登录密码不能为空"); 
        return false;  
    }  
    if(value.length<9||value.length>20){  
        alert("登录密码长度必须在9~20");  
        return false;  
    }  
    return true;  
}  

//Email  
function validateEmail(){  
    var id="email";  
    var value=$("#"+id).val();  
    if(!value){  
        alert("Email不能为空");  
        return false;  
    }  
    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)){  
        alert("Email格式不对");  
        return false;  
    }  
    return true;  
}  
 


</script>

</body>
</html>
